<template>
  <div class="main">
    <codemirror class="code" ref="myCm" v-model="editorValue" :options="cmOptions" @changes="onCmCodeChanges"
      @blur="onCmBlur" @keydown.native="onKeyDown" @mousedown.native="onMouseDown" @paste.native="OnPaste">
    </codemirror>
  </div>
</template>

<script>
import "@/assets/styles/base.scss"
import sqlFormatter from 'sql-formatter';
import { codemirror } from 'vue-codemirror'
import './setting'

export default {
  props: {
    autoFormat: {
      type: Boolean,
      default: () => false
    },
    mode: {
      type: String,
      default: () => 'sql'
    }
  },
  components: {
    codemirror
  },
  data() {
    return {
      // editorValue: "select * from sysy_user where user_id = '12234567' and del_flag = 0", // 代码
      cmOptions: {
        tabSize: 4, // tab的空格个数
        indentUnit: 2, //缩进
        autocorrect: true,  // 自动更正
        spellcheck: true,  // 拼写检查
        lint: true,  // 检查格式
        keyMap: 'sublime',
        theme: 'nord', //主题样式
        lineNumbers: true, //是否显示行数
        lineWrapping: true, //是否自动换行
        styleActiveLine: true, //line选择是是否加亮
        matchBrackets: true, //括号匹配
        mode: this.mode, //实现代码高亮
        readOnly: false, //只读
        placeholder: '请输入代码...', // 设置占位符
      }
    }
  },
  mounted() {
    if(this.autoFormat) {
      this.editorValue = this.sqlFormatter(this.editorValue)
    }
  },
  methods: {
    // sql格式化
    sqlFormatter(editorValue) {
       return sqlFormatter.format(editorValue)
    },
    // resetLint() {
    //   if (!this.$refs.myCm.codemirror.getValue()) {
    //     this.$nextTick(() => {
    //       this.$refs.myCm.codemirror.setOption("lint", false);
    //     });
    //     return;
    //   }
    //   this.$refs.myCm.codemirror.setOption("lint", false);
    //   this.$nextTick(() => {
    //     this.$refs.myCm.codemirror.setOption("lint", true);
    //   });
    // },
    // 代码更改时
    onCmCodeChanges(cm, changes) {
      // this.editorValue = cm.getValue();
      // this.resetLint();
    },
    // 失去焦点时处理函数
    onCmBlur(cm, event) {
      try {
        let editorValue = cm.getValue();
        if (this.mode === "sql" && editorValue) {
          if (!this.autoFormat) {
            return;
          }
          this.editorValue = this.sqlFormatter(editorValue);
        }
      } catch (e) {}
    },
    // 按下键盘事件处理函数
    onKeyDown(event) {
      const keyCode = event.keyCode || event.which || event.charCode;
      const keyCombination =
        event.ctrlKey || event.altKey || event.metaKey;
      if (!keyCombination && keyCode > 64 && keyCode < 123) {
        this.$refs.myCm.codemirror.showHint({ completeSingle: false });
      }
    },
    // 按下鼠标时事件处理函数
    onMouseDown(event) {
      this.$refs.myCm.codemirror.closeHint();
    },
    // 黏贴事件处理函数
    OnPaste(event) {
      if (this.mode === "sql") {
        try {
          if (!this.autoFormat) {
            return;
          }
          this.editorValue = this.sqlFormatter(this.editorValue);
        } catch (e) {}
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.code {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss">
.CodeMirror {
  height: 100%;
}
</style>